// vue.config.js 是 Vue CLI 项目中的配置文件，它允许你自定义 Vue CLI 的构建配置
// 这个文件可以包含 webpack 的配置，Vue 应用的运行时配置等。

module.exports = {
  // 设置应用的公共路径，用于解析应用的资源路径
  publicPath: '/',

  // 开启在开发环境中保存文件时执行 ESLint 检查的功能
  lintOnSave: true,

  // 设置生产环境构建时不生成 source map 文件
  productionSourceMap: false,

  chainWebpack: config => {
    // 通过 tap 函数修改 html-webpack-plugin 的配置
    config.plugin('html').tap(args => {
      // 将环境变量传递给 html 模板
      args[0].env = process.env.NODE_ENV
      // 返回修改后的参数
      return args
    })

    // 全局解析Sass
    // 配置 webpack 以全局解析 Sass 文件
    // 首先获取 'scss' 规则的 oneOf 数组
    const oneOfsMap = config.module.rule('scss').oneOfs.store
    // 对 oneOf 数组中的每个规则进行遍历
    oneOfsMap.forEach(item => {
      // 使用 'sass-resources-loader' 插件
      item
        .use('sass-resources-loader')
        .loader('sass-resources-loader')  // 指定 loader
        .options({
          // 配置 'sass-resources-loader' 的选项
          // 引入全局 Sass 文件，使得在所有 Sass 文件中都可以使用 mixin.scss 中的资源
          resources: ['./src/assets/css/mixin.scss']
        })
        .end()  // 结束 loader 的配置
    })
  },

  configureWebpack: {
    // 配置 webpack 的性能选项
    performance: {
      // 取消打包后文件大于244k警告
      hints: false
    }
  }
}
